<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全国省市区——下拉联动</title>

<!-- 使用文本方式回传信息 -->
<script type="text/javascript">
	/*
	 *省请求---字符串
	 */
	function province() {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Province");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			provinceBack(xmlHttp);
		}
		xmlHttp.send();
	}
	function provinceBack(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			var provinces = xmlHttp.responseText.split(";"); //拿到所有省字符串，分割成省字符串数组
			for (var i = 0; i < provinces.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				option.setAttribute("value", provinces[i].split(",")[0]); //为option添加value属性，值为省代码
				var option_text = document.createTextNode(provinces[i]
						.split(",")[1]); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("province").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *市请求---字符串
	 */
	function city(provinceID) { //市请求
		//document.getElementById("city").removeChild(document.getElementById("cityOp"));
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "City");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			cityBack(xmlHttp);
		}
		xmlHttp.send("provinceID=" + provinceID);
	}
	function cityBack(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功

			while (document.getElementById("city").firstChild != null) {
				document.getElementById("city").removeChild(
						document.getElementById("city").firstChild);
			}
			area(0);
			//alert(xmlHttp.responseType);
			var citys = xmlHttp.responseText.split(";"); //拿到所有省字符串，分割成省字符串数组
			for (var i = 0; i < citys.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				option.setAttribute("value", citys[i].split(",")[0]); //为option添加value属性，值为省代码
				//option.setAttribute("id", "cityOp");
				var option_text = document
						.createTextNode(citys[i].split(",")[1]); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("city").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *县请求---字符串
	 */
	function area(cityID) { //市请求
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Area");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			areaBack(xmlHttp);
		}
		xmlHttp.send("cityID=" + cityID);
	}
	function areaBack(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功

			while (document.getElementById("area").firstChild != null) {
				document.getElementById("area").removeChild(
						document.getElementById("area").firstChild);
			}

			//alert(xmlHttp.responseType);
			var areas = xmlHttp.responseText.split(";"); //拿到所有省字符串，分割成省字符串数组
			for (var i = 0; i < areas.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				option.setAttribute("value", areas[i].split(",")[0]); //为option添加value属性，值为省代码
				var option_text = document
						.createTextNode(areas[i].split(",")[1]); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("area").appendChild(option); //将option标签加入select标签			
			}
		}
	}
</script>

<!-- 使用xml方式回传信息 -->
<script type="text/javascript">
	/*
	 *省请求---xml
	 */
	function province_xml() {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Province_xml");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			provinceBack_xml(xmlHttp);
		}
		xmlHttp.send();
	}
	function provinceBack_xml(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			var provinces = xmlHttp.responseXML
					.getElementsByTagName("province");
			//alert(provinces.length);
			//alert(document.getElementById("province_xml").nodeName);
			for (var i = 0; i < provinces.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value",
						provinces[i].firstChild.firstChild.nodeValue); //为option添加value属性，值为省代码
				var option_text = document
						.createTextNode(provinces[i].lastChild.firstChild.nodeValue); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("province_xml").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *市请求---xml
	 */
	function city_xml(provinceID) { //市请求
		//document.getElementById("city").removeChild(document.getElementById("cityOp"));
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "City_xml");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			cityBack_xml(xmlHttp);
		}
		xmlHttp.send("provinceID=" + provinceID);
	}
	function cityBack_xml(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			while (document.getElementById("city_xml").firstChild != null) {
				document.getElementById("city_xml").removeChild(
						document.getElementById("city_xml").firstChild);
			}
			area_xml(0);	
			//alert(xmlHttp.responseType);
			var citys = xmlHttp.responseXML.getElementsByTagName("city");
			for (var i = 0; i < citys.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value",
						citys[i].firstChild.firstChild.nodeValue); //为option添加value属性，值为省代码
				var option_text = document
						.createTextNode(citys[i].lastChild.firstChild.nodeValue); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("city_xml").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *县请求---xml
	 */
	function area_xml(cityID) { //市请求
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Area_xml");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			areaBack_xml(xmlHttp);
		}
		xmlHttp.send("cityID=" + cityID);
	}
	function areaBack_xml(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功

			while (document.getElementById("area_xml").firstChild != null) {
				document.getElementById("area_xml").removeChild(
						document.getElementById("area_xml").firstChild);
			}
			//alert(xmlHttp.responseType);
			var areas = xmlHttp.responseXML.getElementsByTagName("area");
			for (var i = 0; i < areas.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value",
						areas[i].firstChild.firstChild.nodeValue); //为option添加value属性，值为省代码
				var option_text = document
						.createTextNode(areas[i].lastChild.firstChild.nodeValue); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("area_xml").appendChild(option); //将option标签加入select标签			
			}
		}
	}
</script>

<!-- 使用json方式回传信息 -->
<script type="text/javascript">
	/*
	 *省请求---json
	 */
	function province_json() {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Province_json");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			provinceBack_json(xmlHttp);
		}
		xmlHttp.send();
	}
	function provinceBack_json(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			var provinces = eval(xmlHttp.responseText);
			for (var i = 0; i < provinces.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value", provinces[i]['id']); //为option添加value属性，值为省代码
				var option_text = document.createTextNode(provinces[i]['name']); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("province_json").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *市请求---json
	 */
	function city_json(provinceID) { //市请求
		//document.getElementById("city").removeChild(document.getElementById("cityOp"));
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "City_json");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			cityBack_json(xmlHttp);
		}
		xmlHttp.send("provinceID=" + provinceID);
	}
	function cityBack_json(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			while (document.getElementById("city_json").firstChild != null) {
				document.getElementById("city_json").removeChild(
						document.getElementById("city_json").firstChild);
			}
			area_json(0);			
			//alert(xmlHttp.responseType);
			var citys = eval(xmlHttp.responseText);
			for (var i = 0; i < citys.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value", citys[i]['id']); //为option添加value属性，值为省代码
				var option_text = document.createTextNode(citys[i]['name']); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("city_json").appendChild(option); //将option标签加入select标签			
			}
		}
	}

	/*
	 *县请求---json
	 */
	function area_json(cityID) { //市请求
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.open("post", "Area_json");
		xmlHttp.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xmlHttp.onreadystatechange = function() {
			areaBack_json(xmlHttp);
		}
		xmlHttp.send("cityID=" + cityID);
	}
	function areaBack_json(xmlHttp) {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //请求成功
			while (document.getElementById("area_json").firstChild != null) {
				document.getElementById("area_json").removeChild(
						document.getElementById("area_json").firstChild);
			}

			//alert(xmlHttp.responseType);
			var areas = eval(xmlHttp.responseText);
			for (var i = 0; i < areas.length; i++) { //遍历数组
				var option = document.createElement("option"); //创建option标签
				//alert(provinces[i].lastChild.firstChild.nodeValue);
				option.setAttribute("value", areas[i]['id']); //为option添加value属性，值为省代码
				var option_text = document.createTextNode(areas[i]['name']); //为option标签创建文本子标签
				option.appendChild(option_text); //将文本子标签加入option标签
				document.getElementById("area_json").appendChild(option); //将option标签加入select标签			
			}
		}
	}
</script>

</head>
<body onload="province(),province_xml(),province_json()">
	<center>
		<h1>全国省市区</h1>
		省 <select id="province" onchange="city(this.value)"><option>请选择</option></select>&nbsp;&nbsp;
		市 <select id="city" onchange="area(this.value)"><option>请选择</option></select>&nbsp;&nbsp;区
		<select id="area"><option>请选择</option></select><br /> <br />省 <select
			id="province_xml" onchange="city_xml(this.value)">
			<option>请选择</option>
		</select>&nbsp;&nbsp; 市 <select id="city_xml" onchange="area_xml(this.value)">
			<option>请选择</option>
		</select>&nbsp;&nbsp; 区 <select id="area_xml"><option>请选择</option></select><br />
		<br />省 <select id="province_json" onchange="city_json(this.value)">
			<option>请选择</option>
		</select>&nbsp;&nbsp; 市 <select id="city_json" onchange="area_json(this.value)">
			<option>请选择</option>
		</select>&nbsp;&nbsp; 区 <select id="area_json"><option>请选择</option></select>
	</center>
</body>
</html>